<template>
  <!-- 局部组件 -->
  <!-- <div class="card">
    <Header></Header>
    <div>
      <Menu></Menu>
      <Content></Content>
    </div>
  </div> -->

  <!-- 全局组件 -->
  <!-- <Card></Card>
  <Card></Card>
  <Card></Card>
  <Card></Card> -->

  <!-- 递归组件 -->
  <!-- el-icon 需要生效size 才能起作用 -->
  <el-icon :style="{ fontSize: size + 'px' }" :color="color">
    <Edit  class="el-icon"/>
  </el-icon>

  <el-icon>
    <Edit />
  </el-icon>
  <!-- 或者独立使用它，不从父级获取属性 -->
</template>

<script setup lang='ts'>
// 局部组件
/* import Header from "./Layout/Header/index.vue"
import Menu from "./Layout/Menu/index.vue"
import Content from "./Layout/Content/index.vue" */

import { ref, reactive } from 'vue'

const size = ref<number>(20)
const color = ref<string>("green")

</script>

<style scoped lang='less'>
@border: #ccc;

.card {
  border: 1px solid @border;
}
  
</style>